<template>
  <div class="hw-box-style-flex hw-box-style-flex-clm tab-boxs" @mouseup.stop="drops">
    <div v-for="(item, indexs) in moduleLists" :key="item.id">
      <div
        v-if="item.children.length == 0"
        class="hw-flex-style-b-c hw-click-cursor levelTab"
        style="padding-left: 8px"
        :class="{ 'active-item': item.id == store.id }"
        @click.stop="pathPage(item.id, props.parentId)"
      >
        <div class="heard-left">
          <span
            @mousedown.prevent="dragover($event, item)"
            @mouseup.stop="drop(item.id, props.parentId, props.moduleLists, indexs)"
            class="parent-text"
            >{{ item.text }}</span
          >
        </div>
        <div class="heard-right hw-box-end-box">
          <t-space size="small">
            <t-popup :overlay-style="{ width: '160px' }" destroy-on-close trigger="hover" placement="bottom">
              <template #content>
                <div class="pop-box" v-if="store.projectRole == 1">
                  <div v-if="props.level <= 2" class="pop-item hw-click-cursor" @click.stop="addunit(item.id)">
                    添加子单元
                  </div>
                  <div class="pop-item hw-click-cursor" @click.stop="deleteModule(item.id)">删除单元</div>
                  <div
                    class="pop-item hw-click-cursor"
                    @click.stop="sortUp(item.id, props.parentId, props.moduleLists, indexs)"
                    v-if="indexs !== 0 && props.moduleLists.length !== 0"
                  >
                    单元上移
                  </div>
                  <div
                    class="pop-item hw-click-cursor"
                    @click.stop="sortDown(item.id, props.parentId, props.moduleLists, indexs)"
                    v-if="indexs !== props.moduleLists.length - 1"
                  >
                    单元下移
                  </div>
                </div>
              </template>
              <img
                src="https://static-1316349889.cos.ap-shanghai.myqcloud.com/assets/img/omit.svg"
                alt=""
                @click.stop="clock"
                class="seeting"
              />
              <!-- <t-icon name="more" size="16px" class="seeting" @click.stop="clock" /> -->
            </t-popup>

            <!-- <t-icon name="add" size="14px" @click.stop="addunit(item.id)" /> -->
          </t-space>
        </div>
      </div>
      <div v-else>
        <t-collapse :expandOnRowClick="false">
          <t-collapse-panel
            :value="item.id"
            :class="{ 'collapse-active': item.id == store.id, 'collapse-activeNo': item.id !== store.id }"
          >
            <template #header>
              <span
                @click.stop="pathPage(item.id, props.parentId)"
                @mouseup.stop="drop(item.id, props.parentId, props.moduleLists, indexs)"
                @mousedown.prevent="dragover($event, item)"
                :class="{ 'title-text': item.id == store.id }"
                >{{ item.text }}</span
              >
            </template>
            <template #headerRightContent>
              <div class="heard-right">
                <t-space size="small">
                  <t-popup :overlay-style="{ width: '160px' }" destroy-on-close trigger="hover" placement="bottom">
                    <template #content>
                      <div class="pop-box" v-if="store.projectRole == 1">
                        <div class="pop-item hw-click-cursor" @click.stop="addunit(item.id)">添加子单元</div>
                        <div
                          class="pop-item hw-click-cursor"
                          @click.stop="sortUp(item.id, props.parentId, props.moduleLists, indexs)"
                          v-if="indexs !== 0 && props.moduleLists.length !== 0"
                        >
                          单元上移
                        </div>
                        <div
                          class="pop-item hw-click-cursor"
                          @click.stop="sortDown(item.id, props.parentId, props.moduleLists, indexs)"
                          v-if="indexs !== props.moduleLists.length - 1"
                        >
                          单元下移
                        </div>
                      </div>
                    </template>
                    <img
                      src="https://static-1316349889.cos.ap-shanghai.myqcloud.com/assets/img/omit.svg"
                      alt=""
                      @click.stop="clock"
                      class="seeting"
                    />
                  </t-popup>

                  <!-- <t-icon name="add" size="14px" @click.stop="addunit(item.id)" /> -->
                </t-space>
              </div>
            </template>
            <div v-for="(items, index) in item.children" :key="items.id">
              <div v-if="items.children.length == 0" class="btm-tansfrom hw-click-cursor" :draggable="true">
                <div
                  class="btm-item hw-flex-style-b-c"
                  @click.stop="pathPage(items.id, item.id)"
                  :class="{ 'active-item': items.id == store.id }"
                >
                  <span
                    @mouseup.stop="drop(items.id, item.id, item.children, index)"
                    @mousedown.prevent="dragover($event, items)"
                    class="heard-left"
                    >{{ items.text }}</span
                  >
                  <div class="heard-right">
                    <t-popup :overlay-style="{ width: '160px' }" destroy-on-close trigger="hover" placement="bottom">
                      <template #content>
                        <div class="pop-box" v-if="store.projectRole == 1">
                          <div v-if="props.level <= 2" class="pop-item hw-click-cursor" @click.stop="addunit(items.id)">
                            添加子单元
                          </div>
                          <div class="pop-item hw-click-cursor" @click.stop="deleteModule(items.id)">删除单元</div>
                          <div
                            class="pop-item hw-click-cursor"
                            @click.stop="sortUp(items.id, item.id, item.children, index)"
                            v-if="index !== 0 && items.length !== 0"
                          >
                            单元上移
                          </div>
                          <div
                            class="pop-item hw-click-cursor"
                            @click.stop="sortDown(items.id, item.id, item.children, index)"
                            v-if="index !== items.length - 1"
                          >
                            单元下移
                          </div>
                        </div>
                      </template>
                      <img
                        src="https://static-1316349889.cos.ap-shanghai.myqcloud.com/assets/img/omit.svg"
                        alt=""
                        @click.stop="clock"
                        class="seeting"
                      />
                    </t-popup>
                  </div>
                </div>
              </div>
              <div v-else>
                <itemView
                  :moduleLists="[items]"
                  :parentId="item.id"
                  :level="props.level + 1"
                  @mouseup.stop="drop(items.id, item.id, item.children, index)"
                />
              </div>
            </div>
          </t-collapse-panel>
        </t-collapse>
      </div>
    </div>

    <div class="btm-tansfrom hw-click-cursor" id="moveBox" v-if="false">
      <!-- longTouch -->
      <div class="btm-item hw-flex-style-b-c">
        <span>{{ moveItem.info.text }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="itemView">
// @ts-nocheck
import threeList from './three.vue';
import { ref, reactive, nextTick, defineExpose, watch } from 'vue';
import { moduleSave } from '@/api/desgin/desgin';
import { useProjectStore } from '@/store';

const store = useProjectStore();

const show = ref(false);
const longTouch = ref(false);
const time = ref(null);
const x = ref(0);
const y = ref(0);
const clock = () => {};
const moveItem = reactive({
  info: null,
});
const props = defineProps({
  moduleLists: {
    type: Array,
  },
  ids: {
    type: Number,
  },
  parentId: {
    type: Number,
  },
  level: {
    type: Number,
  },
});

//递归函数
// const cycle = (data) => {
//   let newData = null;
//   data.forEach((item) => {
//     if (item.children.length != 0) {
//       cycle(item.children);
//     } else {
//       newData = item;
//     }
//   });

//   return newData;
// };

// 使用watch监听modelList的变化
// watch(
//   () => props.moduleLists,
//   () => {
//     console.log(cycle(props.moduleLists));
//     console.log('成功监听');

//     props.moduleLists.find((el) => {
//       return el.id === store.id;
//     });
//   },
// );

const emit = defineEmits(['navModel', 'delModule']);
const pathPage = (e?: number, pId?: number | unknown) => {
  //点击修改
  console.log(e, pId);
  store.$patch((state) => {
    state.id = e;
    state.parentId = pId ? pId : 0;
  });
};
const addunit = async (e: number | unknown) => {
  //新增子单元

  store.$patch((state) => {
    state.id = 0;
    state.parentId = e;
    state.AddUnitstatus = !state.AddUnitstatus;
  });
  // let arr1 = {
  //   id: 0,
  //   name: '示例单元',
  //   description: '',
  //   coverUrl: '',
  //   parentId: e !== 0 ? e : 0,
  //   data: [],
  // };
  // let res = await moduleSave(localStorage.getItem('projectId'), arr1);
  // if (res.statusCode == 200) {
  //   store.$patch((state) => {
  //     state.id = res.data;
  //   });
  //   store.$patch((state) => {
  //     state.planChildType = false;
  //   });
  //   // MessagePlugin.success('保存成功');
  //   emit('setGroup');
  // }
};
const deleteModule = (e: number) => {
  // emit('delModule', e);
  store.$patch((state) => {
    state.delId = e;
  });
};
const drop = (id?: any, parentId?: any, arr?: any, index?: any) => {
  console.log(longTouch.value);
  if (longTouch.value) {
    console.log('抬起');
    if (id) {
      // let lodid = arr[index + 1].id;
      // let newid = arr[index].id;
      let arry = [];
      arr.forEach((element, indexs) => {
        if (indexs == index) {
          arry.push(moveItem.info.id);
          arry.push(element.id);
        } else {
          arry.push(element.id);
        }
      });
      store.$patch((state) => {
        state.moduleList = {
          projectId: Number(localStorage.getItem('projectId')),
          parentId: parentId ? parentId : 0,
          sort: arry,
        };
      });
    }
    document.onmousemove = function (event) {
      let doms = document.getElementById('moveBox');
    };
  } else {
    console.log('点击事件');
    clearTimeout(time.value);
  }

  longTouch.value = false;
};
const drops = () => {
  // console.log('drops时间');
  longTouch.value = false;
  document.onmousemove = function (event) {
    let doms = document.getElementById('moveBox');
  };
};

const dragover = (event: any, item: any) => {
  // console.log('按下');
  time.value = setTimeout(() => {
    longTouch.value = true;
    moveItem.info = item;
    document.onmousemove = function (event) {
      let doms = document.getElementById('moveBox');
      let events: any = event || window.event;
      var st1 = document.body.scrollTop;
      var st2 = document.documentElement.scrollTop;
      var st = st1 || st2;
      var sl1 = document.body.scrollLeft;
      var sl2 = document.documentElement.scrollLeft;
      var sl = sl1 || sl2;
      var left = events.clientX;
      var top = events.clientY;

      doms.style.left = left + sl - 80 + 'px';
      doms.style.top = top + st - 120 + 'px';
    };
    clearTimeout(time.value);
  }, 600);
  // console.log('触发');
};
const sortUp = (id, parentId, arr, index) => {
  let lodid = arr[index - 1].id;
  let newid = arr[index].id;
  let arry = [];
  arr.forEach((element) => {
    arry.push(element.id);
  });
  arry[index - 1] = newid;
  arry[index] = lodid;
  store.$patch((state) => {
    state.moduleList = {
      projectId: Number(localStorage.getItem('projectId')),
      parentId: parentId ? parentId : 0,
      sort: arry,
    };
  });
};
const sortDown = (id, parentId, arr, index) => {
  let lodid = arr[index + 1].id;
  let newid = arr[index].id;
  let arry = [];
  arr.forEach((element) => {
    arry.push(element.id);
  });
  arry[index + 1] = newid;
  arry[index] = lodid;
  store.$patch((state) => {
    state.moduleList = {
      projectId: Number(localStorage.getItem('projectId')),
      parentId: parentId ? parentId : 0,
      sort: arry,
    };
  });
};
defineExpose({
  drops,
});
</script>

<style lang="less" scoped>
.btm-list-active {
  width: 100%;
  //   height: auto;
}
.tab-boxs {
  :deep(span) {
    cursor: pointer;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 24px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  :deep(.t-collapse-panel__header) {
    padding-left: 12px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  :deep(.t-collapse-panel__body) {
    padding-left: 20px;
  }
  :deep(.t-collapse-panel__header span) {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  :deep(.t-collapse-panel__header--blank) {
    display: none !important;
    flex: 0;
  }
}
.btm-list {
  width: 100%;
  height: 0px;
  overflow: hidden;
}
.btm-tansfrom {
  border-radius: 4px;
  // transition: all 0.5s;
}
.hw-flex-style-b-c {
  padding: 12px 8px;
  border-radius: 4px;
}
.active-item {
  background: #f0e9e1;
  color: #fff;
  span {
    font-size: 16px;
    color: #e62b17 !important;
    line-height: 24px;
  }
}
.seeting {
  width: 20px;
  height: 20px;
  // transform: rotate(90deg);
  color: #e62b17;
}
.parent-text {
  margin-left: 24px;
}
.btm-item {
  height: 48px;
  padding: 8px 8px;
  padding-left: 22px;
  span {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.9);
    line-height: 24px;
    margin-left: 8px;
  }
}
.heard-right {
  cursor: pointer;
  display: flex;
  justify-content: flex-end;
  width: 20%;
  margin-right: 12px;
  opacity: 0;
}
.heard-right:hover {
  opacity: 1;
}
:deep(.t-collapse-panel__header:hover) {
  .heard-right {
    opacity: 1;
  }
}
:deep(.levelTab:hover) {
  .heard-right {
    opacity: 1;
  }
}
:deep(.btm-item:hover) {
  .heard-right {
    opacity: 1;
  }
}
.hw-flex-style-b-c:hover {
  .heard-right {
    display: flex;
  }
}
.heard-left {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.card-item-left {
  display: flex;
  flex: 1;
  min-width: 70%;
}
.hw-box-style-flex {
}
#moveBox {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 99999;
  border: 1px solid @color-text-color;
  width: 140px;
}
.hw-box-style-flex-clm {
  padding: 0px 0px;
}
.title-text {
  width: 100%;
  color: #e62b17;
}
:deep(.t-collapse-panel__content) {
  padding: 0;
}
:deep(.t-collapse-panel__header) {
  padding: 8px;
}
:deep(.t-collapse-panel) {
  .t-collapse-panel__wrapper {
    .t-collapse-panel__header {
      background: #fff;
      border-radius: 4px;
    }
  }
}

:deep(.collapse-active .t-collapse-panel__wrapper .t-collapse-panel__header) {
  background: #f0e9e1;
  border-radius: 4px;
}
:deep(
    .collapse-active .t-collapse-panel__content .collapse-activeNo .t-collapse-panel__wrapper .t-collapse-panel__header
  ) {
  background: #fff;
  border-radius: 4px;
}
:deep(.t-collapse-panel__icon) {
  color: #999999;
}
:deep(.t-collapse-panel__header:hover) {
  background: rgba(251, 248, 242, 0.6) !important;
}
// :deep(.t-menu__item:hover) {
//   background: rgba(251, 248, 242, 0.2) !important;
// }
.btm-item:hover {
  background: rgba(251, 248, 242, 0.6) !important;
}
</style>
